<template>
    <div class="container">
        <div class="body_wrap">
            <el-card shadow="hover" ref="content_card">
                <el-tabs v-model="active" @tab-click="handleClick" >
                    <el-tab-pane
                        v-for="(item, index) in tabs"
                        :key="index"
                        :label="`${item.label}(${item.count})`"
                        :name="item.name"
                    >
                        <component v-if="item.show" :is="item.component" :params="item.params" @getGoodsCount="getGoodsCount"></component>
                    </el-tab-pane>
                </el-tabs>
            </el-card>
        </div>
    </div>
</template>

<script>
import Orders from "./orders";
export default {
    name: "tabs",
    components: {
        Orders,
    },
    data() {
        return {
            active: "all",
            tabs: [
                {
                    label: "全部订单",
                    name: "all",
                    show: true,
                    component: Orders,
                    count: 0,
                    params: {status: 1}
                },
                // {
                //     label: "普通订单",
                //     name: "normal",
                //     show: false,
                //     component: Orders,
                //     count: 0,
                //     params: {status: 2}
                // },
                // {
                //     label: "活动订单",
                //     name: "activity",
                //     show: false,
                //     component: Orders,
                //     count: 0,
                //     params: {status: true}
                // }
            ]
        };
    },

    created() {
        this.getGoodsCount()
    },

    methods: {
        handleClick(tab) {
            /**
             * 每次换tab的时候，子组件的mounted()函数都会被触发4次。
             * 这是因为每次我们按tab的时候，都有4个子组件被渲染。
             * 所以我们要用v-if来选择渲染的组件。
             */
            this.tabs.forEach(item =>
                item.name === tab.name
                    ? (item.show = true)
                    : (item.show = false)
            );
        },

        /**
         * 详细信息
         */
        async getGoodsCount() {
            const res = await this.$http({
                url: '/mall/pmsspu/getGoodsCount',
                method: 'GET'
            })

        },
    }
};
</script>

<style lang="scss" scoped></style>
